<template>
  <div class="message-list">
    <el-empty v-if="messages.length === 0" description="暂无消息"></el-empty>

    <div v-else class="message-item"
         v-for="message in messages"
         :key="message.id"
         :class="{ 'unread': !message.isRead }"
         @click="handleClick(message)">

      <div class="message-avatar" v-if="message.type !== 'system'">
        <el-avatar :src="getAvatarFromExtra(message.extra) || require('@/assets/images/profile.jpg')"></el-avatar>
      </div>

      <div class="message-content">
        <div class="message-header">
          <span class="message-title">{{ message.title }}</span>
          <span class="message-time">{{ formatTime(message.createTime) }}</span>
        </div>

        <div class="message-body">
          <p>{{ message.content }}</p>
        </div>

        <div class="message-footer">
          <span class="message-sender">
            {{ getSenderFromExtra(message.extra) || '系统' }}
            <template v-if="message.type === 'system'"> · 系统消息</template>
            <template v-else-if="message.type === 'private'"> · 私信</template>
            <template v-else-if="message.type === 'like'"> · 点赞</template>
            <template v-else-if="message.type === 'comment'"> · 评论</template>
          </span>

          <div class="message-actions">
            <el-button
              v-if="!message.isRead"
              type="text"
              size="mini"
              @click.stop="markAsRead(message.id)">
              标记为已读
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click.stop="deleteMessage(message.id)">
              删除
            </el-button>
          </div>
        </div>
      </div>

      <div class="unread-dot" v-if="!message.isRead"></div>
    </div>

    <div class="pagination" v-if="total > 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageList',
  props: {
    messages: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      const now = new Date();
      
      // 如果是今天的消息，只显示时间
      if (date.toDateString() === now.toDateString()) {
        return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      }
      
      // 如果是昨天的消息
      const yesterday = new Date(now);
      yesterday.setDate(yesterday.getDate() - 1);
      if (date.toDateString() === yesterday.toDateString()) {
        return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      }
      
      // 如果是今年的消息
      if (date.getFullYear() === now.getFullYear()) {
        return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' +
               date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      }
      
      // 其他情况显示完整日期
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }) + ' ' +
             date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
    },
    handleClick(message) {
      this.$emit('read', message.id)

      const extra = this.parseExtra(message.extra)
      // 根据消息类型跳转到不同页面
      if (extra.link) {
        this.$router.push(extra.link)
      } else if (extra.postId) {
        this.$router.push(`/post/${extra.postId}`)
      } else if (extra.userId) {
        this.$router.push(`/user/${extra.userId}`)
      }
    },
    markAsRead(id) {
      this.$emit('read', id)
    },
    deleteMessage(id) {
      this.$emit('delete', id)
    },
    parseExtra(extraStr) {
      try {
        return JSON.parse(extraStr || '{}')
      } catch (e) {
        return {}
      }
    },
    getAvatarFromExtra(extraStr) {
      const extra = this.parseExtra(extraStr)
      return extra.avatar
    },
    getSenderFromExtra(extraStr) {
      const extra = this.parseExtra(extraStr)
      return extra.senderName
    },
    handlePageChange(page) {
      this.$emit('page-change', page)
    }
  }
}
</script>

<style scoped>
.message-list {
  padding: 10px;
}

.message-item {
  position: relative;
  display: flex;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
}

.message-item:hover {
  background-color: #f5f7fa;
}

.message-item.unread {
  background-color: #f0f7ff;
  border-left: 3px solid #409eff;
}

.message-avatar {
  margin-right: 15px;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.message-title {
  font-weight: bold;
  color: #333;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-body {
  margin-bottom: 8px;
  color: #666;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-sender {
  font-size: 12px;
  color: #999;
}

.message-actions {
  text-align: right;
}

.unread-dot {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f56c6c;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
